<template>
    <div class="user-page"> 
        <div class="head-box">
            <!-- 用户信息 -->
            <div class="user-box">
                <div class="user-head">
                    <p class="img-box">
                        <van-image
                        round
                        width="100%"
                        height="100%"
                        fit="cover"
                        :src="userInfo.wx_header" />
                    </p>
                </div>
                <div class="user-info">
                    <div class="name">{{userInfo.wx_nickname}}</div>  
                    <div class="vip-data">
                        <span class="vip-type">普通会员</span>
                        <span class="vip-id">ID:{{userInfo.id}}</span>
                    </div>  
                </div>
                <!-- <div class="sign-box">
                    <div class="sign-in">签到</div>
                </div>  -->
            </div>
            <!-- 收入 -->
            <!-- <div class="income text-center">
                <van-row>
                    <van-col span="8">
                        <p class="income-title">今日收入</p>
                        <p class="num">0.00</p>
                    </van-col>
                    <van-col span="8">
                        <p class="income-title">今日收入</p>
                        <p class="num">0.00</p>
                    </van-col>
                    <van-col span="8">
                        <p class="income-title">今日收入</p>
                        <p class="num">0.00</p>
                    </van-col>
                </van-row>
            </div> -->
        </div>
        <div style="margin-top:5px;">
            <van-cell value="我的订单" icon="completed" is-link  @click="jumpPage('orderList')"></van-cell>
            <van-cell value="奖学金" icon="paid" is-link  @click="jumpPage('scholarshipDetail')"></van-cell> 
        </div>
        <!-- <div style="margin-top:5px;">
            <van-cell value="我的项目" icon="cashier-o" is-link  @click="jumpPage('')"></van-cell>
            <van-cell value="赠送记录" icon="notes-o" is-link  @click="jumpPage('')"></van-cell> 
        </div> -->
        <div style="margin-top:5px;">
            <van-cell value="城市驿站" icon="location-o" is-link @click="jumpPage('cityPostDetail')"></van-cell>
            <van-cell value="优惠券" icon="coupon-o" is-link   @click="jumpPage('couponsDetail')"></van-cell> 
        </div>
        <!-- <div class="menu-group"> 
            <van-row class="groun-content text-center">
                <van-col span="8">
                    <p class="icon">
                       <van-image
                        round
                        width="100%"
                        height="100%"
                        fit="cover"
                        src="https://img.yzcdn.cn/vant/cat.jpeg" />
                    </p>
                    <p class="name">我的订单</p>
                </van-col>
                <van-col span="8"  @click="jumpPage('scholarshipDetail')">
                    <p class="icon">
                        <van-image
                        round
                        width="100%"
                        height="100%"
                        fit="cover"
                        src="https://img.yzcdn.cn/vant/cat.jpeg" />
                    </p>
                    <p class="name">奖学金</p>
                </van-col>
                <van-col span="8"  @click="jumpPage('')">
                    <p class="icon">
                        <van-image
                        round
                        width="100%"
                        height="100%"
                        fit="cover"
                        src="https://img.yzcdn.cn/vant/cat.jpeg" />
                    </p>
                    <p class="name">我的活动</p>
                </van-col>
            </van-row>
        </div>

        <div class="menu-group">
            <div class="group-name">我的项目</div> 
            <van-row class="groun-content text-center">
                <van-col span="8"  @click="jumpPage('')">
                    <p class="icon">
                       <van-image
                        round
                        width="100%"
                        height="100%"
                        fit="cover"
                        src="https://img.yzcdn.cn/vant/cat.jpeg" />
                    </p>
                    <p class="name">学习记录</p>
                </van-col>
                <van-col span="8" @click="jumpPage('upgradeVIPDetail')">
                    <p class="icon">
                        <van-image
                        round
                        width="100%"
                        height="100%"
                        fit="cover"
                        src="https://img.yzcdn.cn/vant/cat.jpeg" />
                    </p>
                    <p class="name">升级VIP</p>
                </van-col>
                <van-col span="8"  @click="jumpPage('')">
                    <p class="icon">
                        <van-image
                        round
                        width="100%"
                        height="100%"
                        fit="cover"
                        src="https://img.yzcdn.cn/vant/cat.jpeg" />
                    </p>
                    <p class="name">赠送记录</p>
                </van-col>
            </van-row>
        </div>

        <div class="menu-group">
            <div class="group-name">营销管理</div> 
            <van-row class="groun-content text-center">
                <van-col span="6"  @click="jumpPage('cityPostDetail')">
                    <p class="icon">
                       <van-image
                        round
                        width="100%"
                        height="100%"
                        fit="cover"
                        src="https://img.yzcdn.cn/vant/cat.jpeg" />
                    </p>
                    <p class="name">城市驿站</p>
                </van-col>
                <van-col span="6"  @click="jumpPage('integralDetail')">
                    <p class="icon">
                        <van-image
                        round
                        width="100%"
                        height="100%"
                        fit="cover"
                        src="https://img.yzcdn.cn/vant/cat.jpeg" />
                    </p>
                    <p class="name">我的积分</p>
                </van-col>
                <van-col span="6" @click="jumpPage('powerDetail')">
                    <p class="icon">
                        <van-image
                        round
                        width="100%"
                        height="100%"
                        fit="cover"
                        src="https://img.yzcdn.cn/vant/cat.jpeg" />
                    </p>
                    <p class="name">我的助力</p>
                </van-col>
                <van-col span="6"  @click="jumpPage('couponsDetail')">
                    <p class="icon">
                        <van-image
                        round
                        width="100%"
                        height="100%"
                        fit="cover"
                        src="https://img.yzcdn.cn/vant/cat.jpeg" />
                    </p>
                    <p class="name">优惠券</p>
                </van-col>
            </van-row>
        </div> -->

    </div>
</template>

<script>
import * as api from './../../api/api'
export default {
    data(){
        return{ 
            userInfo:{},
        }
    },
    created(){
        this.userInfo=sessionStorage.getItem('userInfo')?JSON.parse(sessionStorage.getItem('userInfo')):{}; 
    },
    methods:{ 
        jumpPage(url){
            if(url){
                this.$router.push({name:url})
            } 
        },
        
    },
    components:{ 

    }

}
</script>


<style scoped lang="scss">
.user-page{
    width:100%;
    height:100%;
    overflow: auto;
    .head-box{
        width:100%;
        padding:.533333rem 0;
        background:#fff;
        
        .user-box{
            position: relative;
            display: flex;
            align-items: center;
            .user-head{
                flex:0 0 2.666667rem;
                .img-box{
                    width:1.866667rem;
                    height:1.866667rem; 
                    margin:auto;
                }
            }
            .user-info{
                flex:1;
                .name{
                    font-size:.48rem;
                    color:#000;
                    font-weight: bold;
                }
                .vip-data{
                    margin-top:.266667rem;
                    .vip-type{
                        padding:.106667rem .16rem;
                        background:#F3DB9D;
                        border-radius: .133333rem;
                    }
                    .vip-id{
                        margin-left:.266667rem;
                        color:#666;
                    }
                }
            }
            .sign-box{
                position: absolute;
                right:0; 
                top:0; 
                padding:.4rem 0 .4rem .4rem;
            }
            .sign-in{ 
                height: .666667rem;
                line-height: .666667rem;
                border-top-left-radius: .333333rem; 
                border-bottom-left-radius: .333333rem;
                background:#F3DB9D;
                color:#333;
                padding:0 .28rem;
            }
        }
        .income{
            background:#fff;
            margin-top:.533333rem;
            .income-title{
                font-size:.4rem;
                color:#000;
                margin-bottom:.2rem;
            }
            .num{
                color:#000;
                font-weight: bold;
            }
        }
        
    }
    .menu-group{
        margin:.4rem; 
        padding:.4rem 0;
        background:#fff;
        border-radius: .2rem;
        .group-name{
            padding:0 .4rem;
            font-weight: bold;
            font-size:.4rem; 
            margin-bottom:.4rem;
        }
        .groun-content{
            .icon{
                width:1.2rem;
                height:1.2rem; 
                margin:auto;
            }
            .name{
                margin-top:.266667rem;
                font-size:.4rem;
            }
        }
    }
       
}

</style>
